<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>



 <!-- 计算器1（if），2 （三目） -->
 <input type="text" value="" id="f1" placeholder="请输入第一个数字">
 <select id="fuhao">
     <option value="+">+</option>
     <option value="-">-</option>
     <option value="*">*</option>
    <option value="/">/</option>
     <option value="%">%</option>
  </select>
 <input type="text" value="" id="f2" placeholder="请输入第二个数字">
 <input type="button" value="=" id="dengyu"/>
 <input type="text" value="" id="f3">  <br/><br/>

<!-- 最简单的计算器 方法 用eval 3 -->
 <!-- <input type="text" id="text1">
<button id="result">=</button>
<h3 id="chu"></h3><br/> -->


     <!-- 计算器 4 单选 if， 三目-->
     <input type="text" value="" id="t1" placeholder="第一个值">
<label><input type="radio" name="opi" id="jia">+</label>
<label><input type="radio" name="opi" id="jian">-</label>
<label><input type="radio" name="opi" id="cheng">*</label>
<label><input type="radio" name="opi" id="chu">/</label>
<label><input type="radio" name="opi" id="qumo">%</label>
<label><input type="radio" name="opi" id="cifang">**</label>
<input type="text" value="" id="t2" placeholder="第二个值">

<input type="button" id="bu1" value="开始计算">
<input type="reset" id="bu2" value="重置">
<input type="t3" value="" id="t3" placeholder="计算结果"> 



<script>

    //计算器 5 弹出框 
   /*  var t1 =parseFloat( prompt("请输入第一个值"))
    var y =prompt("请输入计算符号 + - * / %")
    var t2 =parseFloat( prompt("请输入第二个值"))
    if(y=='+'){
       alert(t1+t2)
    }else if(y=='-'){
        alert(t1-t2)
    }else if(y=='*'){
        alert(t1*t2)
    }else if(y=='/'){
        alert((t1/t2).toFixed(2))
    }else if(y=='%'){
        alert(t1%t2)
    } */


    //计算器 4 单选 三目 ，if
  bu1.onclick = function (){ 
    iu1 = Number(t1.value);
    iu2 = Number(t2.value);
    jia.checked==true ? t3.value = (iu1) +(iu2) : jian.checked == true ? t3.value =(iu1)-(iu2) : cheng.checked==true ?t3.value = (iu1)*(iu2) :chu.checked == true ? t3.value = (iu1)/(iu2) : qumo.checked ==true ? t3.value = (iu1)%(iu2): cifang.checked == true ?t3.value = (iu1)**(iu2): "";
    } 
  /*  bu1.onclick = function(){
        var iu1 = parseFloat(t1.value);
        var iu2 = parseFloat(t2.value);
        if(jia.checked==true){
            t3.value=iu1+iu2
        }else if(jian.checked==true){
            t3.value=iu1-iu2
        }else if(cheng.checked==true){
            t3.value=iu1*iu2
        }else if(chu.checked==true){
            t3.value=iu1/iu2
        }else if(qumo.checked==true){
            t3.value=iu1%iu2
        }else if(cifang.checked==true){
            t3.value=iu1**iu2
        }
    }
    bu2.onclick = function(){
        t1.value="";
        t2.value="";
        t3.value="";
        jia.checked="";
        jian.checked="";
        cheng.checked="";
        chu.checked="";
        qumo.checked="";
        cifang.checked="";
    }  
 */

    //最简单的 计算器 方法 用eval 3
    /*  result.onclick = function(){
        chu.innerHTML = eval(text1.value)
    } 
 */
    
        //计算器 if判断 1
     dengyu.onclick =function(){
        var g1 = parseInt(f1.value);
        var g2 = parseInt(f2.value);
        var fh = fuhao.value;
        if(fh=='+'){
            f3.value=g1+g2
        }else if(fh=='-'){
            f3.value=g1-g2
        }else if(fh=='*'){
            f3.value=g1*g2
        }else if(fh=='/'){
            f3.value=g1/g2
        }else if(fh=='%'){
            f3.value=g1%g2
        }
    } 

     //计算器 三目操作符 2
      /* dengyu.onclick = function(){
        var g1 = parseInt(f1.value);
        var g2 = parseInt(f2.value);
        var fh = fuhao.value;
        fh=='+'?f3.value=g1+g2:null;
        fh=='-'?f3.value=g1-g2:null;
        fh=='*'?f3.value=g1*g2:null;
        fh=='/'?f3.value=g1/g2:null;
        fh=='%'?f3.value=g1%g2:null;
        
        }  */
</script>
</body>
</html>